<script type="text/javascript">
    $(document).ready(function(){
       $('#btnSendEmail').click(function(){
            $('#groupEmail').removeClass('has-error');
            $('#groupDescription').removeClass('has-error');
            var modalShow = $('#modalMessage');
            var contentMessage = $('#contentMessage');
            var name = $('#inputName').val();
            var address = $('#inputAddress').val();
            var phone = $('#inputPhone').val();
            var email = $('#inputEmail').val();
            var description = $('#inputDescription').val();
            var regexEmail = new RegExp('[-0-9a-zA-Z.+_]+@[-0-9a-zA-Z.+_]+\.[a-zA-Z]{2,4}');
            var isValid = true;
            var message = "";
            if(email == '')
            {
                $('#groupEmail').addClass('has-error');
                isValid = false;
                message = 'Vui lòng nhập địa chỉ Email';
            }
            else
            {
                if(!regexEmail.test(email))                
                {
                    $('#groupEmail').addClass('has-error');
                    isValid = false;
                    message = 'Email không chính xác';                    
                }
            }
            if(description == '')
            {
                $('#groupDescription').addClass('has-error');
                message = 'Vui lòng nhập nội dung';
                isValid = false;
            } 
            if(isValid)
            {
                $.ajax({
                   url: '<?php echo base_url('ykienkhachhang/goiykien') ?>',
                   type: 'post',
                   data: {inputName: name, inputAddress: address, inputPhone: phone, inputEmail: email, inputDescription: description},
                   success: function(data)
                   {
                        if(data == 'true')
                        {
                            message = 'Cám ơn bạn góp ý cho chúng tôi. Chúc bạn có 1 ngày thật vui vẻ!';                            
                        }
                        else
                        {                            
                            location.reload();
                        }
                   } 
                });   
            }
            else
            {
                modalShow.modal('show');
                contentMessage.html(message);
            }                     
       }); 
       
       $('#btnReset').click(function(){
            reset();
       });
    });
    
    function reset()
    {
        $('#inputName').val('');
        $('#inputAddress').val('');
        $('#inputPhone').val('');
        $('#inputEmail').val('');
        $('#inputDescription').val('');
        $('#groupEmail').removeClass('has-error');
        $('#groupDescription').removeClass('has-error');
    }
</script>
<div>
    <fieldset>
        <legend><?php echo $info; ?></legend>
        <form class="form-horizontal">
            <div class="form-group">                   
                <label for="inputName" class="col-sm-2 control-label">Họ tên</label>
                <div class="col-sm-7">
                  <input type="text" class="form-control" id="inputName" placeholder="Họ và tên" />
                </div>
            </div>
            <div class="form-group">
                    <label for="inputAddress" class="col-sm-2 control-label">Địa chỉ</label>
                    <div class="col-sm-7">
                      <input type="text" class="form-control" id="inputAddress" placeholder="Địa chỉ" />
                    </div>
                </div>
                <div class="form-group">
                    <label for="inputPhone" class="col-sm-2 control-label">Điện thoại</label>
                    <div class="col-sm-4">
                      <input type="text" class="form-control" id="inputPhone" placeholder="Số điện thoại" />
                    </div>
                </div>
                <div class="form-group" id="groupEmail">
                    <label for="inputEmail" class="col-sm-2 control-label">Email (*)</label>
                    <div class="col-sm-7">
                      <input type="email" class="form-control" id="inputEmail" placeholder="Email" />
                    </div>
                </div>               
                <div class="form-group" id="groupDescription">
                    <label for="inputDescription" class="col-sm-2 control-label">Nội dung góp ý</label>
                    <div class="col-sm-7">
                        <textarea class="form-control" rows="5" id="inputDescription"></textarea>                     
                    </div>
                </div>
                <div class="text-center">
                    <button type="button" class="btn btn-primary" id="btnSendEmail">Gởi</button>
                    <button type="button" class="btn btn-default" id="btnReset">Nhập lại</button>
                </div>
        </form>
    </fieldset>
</div>
<div id="modalMessage" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title" id="myModalLabel"><span class="glyphicon glyphicon-warning-sign"></span> Thông báo</h4>
          </div>
          <div class="modal-body">
              <span class="glyphicon glyphicon-remove" style="color: red;"></span> <span id="contentMessage"></span> 
             <br />             
          </div>        
    </div>
  </div>
</div>